<template>
  <view class="recharge_card" @click="onClickCard()">
    <view class="tag" v-if="item.tagText">{{dictTag(item.tagText)}}</view>
    <view class="rechargeAmount">￥{{item.rechargeAmount / 100}}</view>
    <view class="title">{{item.title}}</view>
  </view>
</template>
<script>
  import {Dict} from "../utils/filter";
  import {Login} from "../utils/user";
  import {Pay} from "../utils/pay";
  import {Api} from "../service/api";
  import {mapActions, mapMutations} from "vuex";

  export default {
    data() {
      return {
        throttleTimer: null,
        userInfo: {}
      }
    },
    props: {
      item: {
        type: Object,
        default: () => {}
      }
    },
    async created() {
      this.userInfo = await this.getInfoMethod()
    },
    methods: {
      ...mapActions('userInfo', ['getInfoMethod']),
      dictTag(val) {
        const list = Dict.getDict('recharge_tag_text').map(item => {
          return {...item, name: item.value}
        }).filter(item => val === item.label)
        if (list) {
          return list[0].name
        } else {
          return ''
        }
      },
      onClickCard() {
        // uni.showToast({
        //   title: '敬请期待',
        //   icon: "none"
        // });
        // return

        if (!this.throttleTimer) {
          uni.showLoading({
            title: '创建订单中...'
          })
          this.throttleTimer = setTimeout(async () => {
            uni.hideLoading()
            console.log(this.tvinfoDetail, 'this.tvinfoDetail');
            let name, id
            if (this.tvinfoDetail) {
              name = this.tvinfoDetail.tvName
              id = this.tvinfoDetail.id
            }
            const {
              data: {
                outTradeNo,
                rechargeAmount,
                subject
              }
            } = await Api.createOrder({
              'rechargeAmount': this.item.rechargeAmount,
              'bean': this.item.bean,
              'giveBean': this.item.giveBean,
              'rechargeType': this.item.type,
              'rechargeTemplateId': this.item.id,
              'subject': this.item.title,
              'tvName': name || null,
              'remark': this.item.remark,
              'tvId': id || null,
              'putInId': this.userInfo.putInId
            })
            // const {code} = await Login.getInstance().getLoginCode()
            const pay = new Pay({
              product: subject,
              openId: this.userInfo.openId,
              outTradeNo: outTradeNo,
              rechargeAmount: rechargeAmount,
              // loginCode: code
            })
            this.throttleTimer = null;
          }, 1000); // 1秒的节流时间
        }
      },
    }
  }
</script>

<style scoped lang="scss">
  .recharge_card{
    border-radius: 20rpx;
    background: url("https://videohz.lingchuang.co/组合 132.png") no-repeat;
    background-size: 100% 100%;
    width: 320rpx;
    height: 180rpx;
    overflow: hidden;
    position: relative;
    padding-left: 20rpx;

    .title{
      color: #4B4A4A;
      font-size: 26rpx;
      margin-top: 15rpx;
    }

    .tag{
      position: absolute;
      top: 0;
      left: 0;
      background-color: #FF703A;
      color: #ffffff;
      font-size: 24rpx;
      border-bottom-right-radius: 20rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 3rpx 15rpx;
    }

    .rechargeAmount{
      font-size: 36rpx;
      color: #FA4E37;
      margin-top: 45rpx;
    }
  }
</style>
